<template>
  <div style="padding: 10px">
    <div class="header">
      <div>
        <a-select
          :options="options"
          v-model:value="value"
          style="width: 200px"
          @change="handleChange"
        >
          <a-select-opt-group>
            <template #label>
              <span> Manager </span>
            </template>
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="Engineer">
            <a-select-option value="Yiminghe">yiminghe</a-select-option>
            <a-select-option value="Yiminghe1">yiminghe1</a-select-option>
          </a-select-opt-group>
        </a-select>
      </div>
      <div
        ><a-button type="primary" @click="showDrawer">
          <el-icon><Plus /></el-icon>
          添加风景
        </a-button></div
      >
    </div>

    <div class="box_img">
      <div v-for="(item, index) in Data" :key="index" :class="item.Class">
        <div v-if="item.Class == 'text_img'" class="Text" @click="Chick(item)">点击激活</div>
        <img v-if="item.Class == 'text_img'" :src="item.img" />

        <!-- 开一个页面预览  :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }" -->
        <a-image style="border-radius: 8px" v-else :src="item.img" @click="visible = true" />
      </div>
    </div>
    <a-drawer
      title="Create a new account"
      :width="720"
      :open="open"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="风景标题" name="scenery_title">
              <a-input v-model:value="form.scenery_title" placeholder="风景标题" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="风景类型" name="scenery_type">
              <a-select
                v-model:value="form.scenery_type"
                show-search
                placeholder="请选择风景类型"
                style="width: 200px"
                :options="options1"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="风景图片" name="scenery_image">
              <a-upload
                v-model:file-list="fileList"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture"
                name="file"
              >
                <a-button> 上传图片 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="封面图片" name="scenery_cover">
              <a-upload
                v-model:file-list="fileList"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture"
                name="file"
              >
                <a-button> 上传图片 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="排序位置" name="sort">
              <a-input v-model:value="form.scenery_title" placeholder="排序位置" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="激活状态" name="activate">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.activate"
                  checked-children="激活"
                  un-checked-children="未激活"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="风景地址" name="address">
              <a-input v-model:value="form.address" placeholder="风景地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="推荐位" name="recommend">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.recommend"
                  checked-children="推荐"
                  un-checked-children="不推荐"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="富文本" name="Text">
              <Tinymce v-model="form.Text" @change="handleChange1" width="100%" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="onClose">退出</a-button>
          <a-button type="primary" @click="onClose">添加</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { adminStore } from '/@/store/locality/admin';
  import { Plus } from '@element-plus/icons-vue';
  import { Tinymce } from '/@/components/Tinymce/index';

  {
    Tinymce;
  }
  const ADStore = adminStore();
  onMounted(() => {
    userInfo.value = ADStore.userInfo;
  });
  const userInfo = ref();

  const fileList = ref([
    {
      uid: '-1',
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);
  function handleChange1(value: string) {
    console.log(value);
  }
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  const handleBlur = () => {
    console.log('blur');
  };
  const handleFocus = () => {
    console.log('focus');
  };

  const options1: any = ref([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'tom', label: 'Tom' },
  ]);

  const visible = ref(false);
  const value = ref(['郴州莽山']);
  const form = reactive({
    scenery_title: '',
    scenery_type: '',
    scenery_image: '',
    scenery_cover: '',
    sort: '',
    activate: false,
    address: '',
    status: '',
    Text: '',
    recommend: false,
  });
  const rules: any = {
    scenery_title: [{ required: true, message: '请输入风景标题' }],
    scenery_type: [{ required: true, message: '请选择风景类型' }],
    scenery_cover: [{ required: true, message: '请输入排序位置' }],
    description: [{ required: true, message: 'Please enter url description' }],
  };
  const options = ref([
    {
      label: '电脑端风景',
      options: [
        {
          value: '1',
          label: '郴州莽山',
        },
        {
          value: '2',
          label: '飞天连山',
        },
      ],
    },
    {
      label: '小程序端',
      options: [
        {
          value: '4',
          label: '永兴银都',
        },
      ],
    },
  ]);
  const Data: any = ref([
    {
      Class: 'text_img_active',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e8bd863-bf16-4647-abf0-88490ce78ced%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692239797&t=a656713f3185954147d0d361bef4b02d',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
    {
      Class: 'text_img',
      img: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
    },
  ]);
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  function Chick(item) {
    item.Class = 'text_img_active';
  }

  const open = ref<boolean>(false);

  const showDrawer = () => {
    open.value = true;
  };

  const onClose = () => {
    open.value = false;
  };
</script>
<style scoped>
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 20px;
    background-color: white;
  }

  @keyframes fadenum {
    20% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(100%);
    }

    40% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(80%);
    }

    60% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(60%);
    }

    80% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(40%);
    }

    100% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(20%);
    }
  }

  @keyframes fadenum1 {
    20% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(100%);
    }

    40% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(80%);
    }

    60% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(60%);
    }

    80% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(40%);
    }

    100% {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      filter: grayscale(20%);
    }
  }

  .box_img {
    display: grid;

    /* grid-auto-rows: 200px; */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 20px;
    border-radius: 16px;
    gap: 10px;

    /* width: 200px;
    height: 200px; */
  }

  .text_img {
    position: relative;
    border-radius: 8px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    background-color: rgb(245 245 245 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
  }

  .text_img_active {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    animation: fadenum1 1s 1;
    border-radius: 8px;
    background-color: rgb(255 255 255 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 40%);

    /* filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%); */
  }

  .Text {
    position: absolute;
    z-index: 9999999;
    top: 45%;
    left: 35%;
    padding: 5px 10px;
    border-radius: 8px;
    background: linear-gradient(to right, white, rgb(255 255 231));
    background-clip: text;
    background-color: rgb(255 255 255 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 40%);
    color: white;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
  }

  .box_img img {
    width: 100%;
    height: 100%;
    transition-property: filter;
    transition-duration: 0.25s, 0.5s;
    animation: fadenum 1s 1;
    object-fit: contain;
    border-radius: 8px;
  }

  .upload-list-inline :deep(.ant-upload-list-item) {
    width: 200px;
    margin-right: 8px;
    float: left;
  }

  .upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
    float: right;
  }
</style>
